<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../common/style/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../common/style/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../../common/style/select.css">
    <script src="../../common/lib/jquery-1.11.2.min.js"></script>
    <script src="../../common/lib/area.js"></script>
    <script type="text/javascript" src="../../common/js/md5.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script>
    <script
      type="text/javascript"
      src="../../common/request/request.js?version=1.0.12"
    ></script>
    <script src="./search_js/search-result-community.js?version=1.0.12"></script>
    <script src="../../common/lib/better-scroll/bscroll.min.js"></script>
    <style>
        .second-select li a span{
            display: inline-block;
            max-width: 80%;
            white-space: nowrap;
            overflow: hidden;
            vertical-align: bottom;
            text-overflow: ellipsis;
        }
        .loadMore{
            text-align: center;
            margin: .4rem;
        }
        .loadMore .aui-btn{
            font-size: 0.6rem;
            background-color: #38B3FF;
        }
        .third-info #left-area,.third-info .list{
            overflow: hidden;
        }
    </style>
</head>

<body class="layout-w" id="view">
    <div class="select-header aui-clearfix">
        <div class="aui-pull-left" style="width:40%;">
            <a href="search-result-build.html" class="select-index-button">写字楼/园区</a>
        </div>
        <div class="aui-pull-left" style="width:40%;">
            <a href="search-result-community.html" class="select-index-button active">联合办公</a>
        </div>
        <div class="aui-pull-left" style="width: 20%;">
            <a href="entry.html?type=2" class="small-select">
                <i class="fa fa-search"></i>&nbsp;搜索
            </a>
        </div>
    </div>
    <div class="main-select">
        <div class="aui-tab" id="select-tab">
            <a class="aui-tab-item aui-active" href="search-result-community.html">按社区显示</a>
            <a class="aui-tab-item" href="search-result-brand.html">按品牌显示</a>
        </div>
        <div class="select-content">
            <div class="second-select">
                <ul class="aui-clearfix" id="all-select">
                    <li data-type="choose-area"><a href="javascript:;"><span>{{selectBar.area}}</span><i class="fa fa-caret-down"></i></a></li>
                    <li data-type="choose-subway"><a href="javascript:;"><span>{{selectBar.subway}}</span><i class="fa fa-caret-down"></i></a></li>
                    <li data-type="choose-sort"><a href="javascript:;"><span>{{selectBar.sort}}</span><i class="fa fa-caret-down"></i></a></li>
                    <li data-type="choose-select"><a href="javascript:;"><span>筛选</span><i class="fa fa-caret-down"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="third-info" style="display:none;" id="choose-area">
            <div id="left-area">
                <ul>
                    <li :class="query.townId == area.item_id ?'active':''" v-for="area in areaList" :key="area.item_id"><a
                            href="javascript:;" data-type="area-1" @click="getArea(area)" v-html="area.item_name"></a></li>
                </ul>
            </div>
            <div class="list" id="right-area">
                <div id="area-all">
                    <a v-for="business in businessList" :class="query.tradingAreaId == business.item_id ?'active':''"
                        :key="business.item_id" v-html="business.item_name" @click="getbus(business)"></a>
                </div>
            </div>
        </div>
        <div class="third-info" style="display:none;" id="choose-subway">
            <div id="left-area">
                <ul>
                    <li :class="[query.subwayLineId == line.item_id?'active':'']" v-for="line in linesList" :key="line.item_id">
                        <a href="javascript:;" data-type="area-1" @click="getlines(line)" v-html="line.item_name"></a></li>
                </ul>
            </div>
            <div class="list" id="right-area">
                <div id="area-all">
                    <a v-for="linebus in linesbusList" :class="[query.subwayStationId == linebus.item_id?'active':'']"
                        :key="linebus.item_id" v-html="linebus.item_name" @click="getlibus(linebus)"></a>
                </div>
            </div>
        </div>
        <div class="third-info" style="display:none;" id="choose-sort">
            <a href="javascript:;" class="select-all-grey">全部</a>
            <div class="select-all-list-2 main-list-zx aui-clearfix sort-list">
                <div v-for="item in sortList"  @click="sort(item)"><a href="javascript:;" class="">{{item.name}}</a></div>
            </div>
        </div>
        <div class="third-info" style="display:none;" id="choose-select">
            <a href="javascript:;" class="select-all-grey aui-margin-b-10">全部</a>
            <div class="main-list-zx">
                <dl>
                    <dt>类型</dt>
                    <dd>
                        <a href="javascript:;" :class="[query.type == item.id?'active':'']" v-for="item in type"
                            @click="handleChooseSelect('type',item)" class="" v-html="item.name"></a>
                    </dd>
                </dl>
                <dl>
                    <dt>所在地</dt>
                    <dd>
                        <a href="javascript:;" :class="[query.placeType == item.id?'active':'']" v-for="item in placeTypeList"
                            @click="handleChooseSelect('placeType',item)" class="" v-html="item.name"></a>
                    </dd>
                </dl>
                <dl class="for-park" v-show="query.type == 1"><!--办公室人数-->
                    <dt>人数</dt>
                    <dd>
                        <a href="javascript:;" :class="[query.officeCapacity == item.id?'active':'']" v-for="item in capacityList"
                            @click="handleChooseSelect('capacity',item)" class="" v-html="item.name" class="">科技</a>
                    </dd>
                </dl>
                <dl class="for-park" v-show="query.type == 3"><!--场地人数-->
                    <dt>人数</dt>
                    <dd>
                        <a href="javascript:;" :class="[query.roadCapacity == item.id?'active':'']" v-for="item in capacityList"
                            @click="handleChooseSelect('capacity',item)" class="" v-html="item.name" class="">科技</a>
                    </dd>
                </dl>
                <dl v-show="query.type == 2"><!--工位价格-->
                    <dt>单价（元/m²·天）</dt>
                    <dd>
                        <a :class="[query.spacePrice == item.id?'active':'']" v-for="item in priceList" href="javascript:;"
                            class="" v-html="item.name" @click="handleChooseSelect('price',item)"></a>
                    </dd>
                </dl>
                <dl v-show="query.type == 1"><!--办公间价格-->
                    <dt>单价（元/m²·天）</dt>
                    <dd>
                        <a :class="[query.officePrice == item.id?'active':'']" v-for="item in priceList" href="javascript:;" class=""
                            v-html="item.name" @click="handleChooseSelect('price',item)"></a>
                    </dd>
                </dl>
                <dl>
                    <dt>品牌</dt>
                    <dd>
                        <a :class="[query.brandId == item.brandId?'active':'']" v-for="item in brandList" href="javascript:;" class=""
                            v-html="item.brandName" @click="handleChooseSelect('brand',item)"></a>
                    </dd>
                </dl>
                <dl>
                    <dt>热搜标签</dt>
                    <dd>
                        <a :class="[query.labelId == hotsearch.tagId?'active':'']" v-for="hotsearch in hotsearchList"
                            href="javascript:;" v-html="hotsearch.keyword" @click="handleChooseSelect('hot',hotsearch)"></a>
                    </dd>
                </dl>
            </div>
            <div class="select-button">
                <a href="javascript:;" class="blue" @click="reset">重置</a>
                <a href="javascript:;" @click="search()">确定</a>
            </div>
        </div>
        <div class="all-list aui-content" v-if="buildingList.length>0">
            <p class="count">共有<span>{{total}}</span>社区</p>
            <ul class="aui-list aui-list-in">
                <li class="aui-list-item" class="search-list-item clearfix" v-for="list in buildingList" @click="goDetail(list)">
                    <div class="aui-list-item-media">
                        <img :src="list.imgUrl?getImgUrl()+list.imgUrl : '../../common/images/noupload.png'" />
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-ellipsis-1" style="width:100%;">{{list.communityName}}·{{list.brandName}}
                            </div>
                        </div>
                        <div class="aui-info" style="padding:.2rem 0 0;">
                            <div class="aui-info-item">
                                <span class="mianji"><small>{{list.buildingName}} | {{list.townName}} - {{list.tradingArea}}</small></span>
                            </div>
                        </div>
                        <div class="aui-info">
                            <div class="aui-info-item" style="padding-top:.1rem;color:#FF6F6F;font-weight:bold;">{{list.houseNum<5?'余量紧张':''}}</div>
                            
                            <div class="aui-info-item"><span class="blue">{{list.price}}</span>&nbsp;<small>元·人/月起</small></div>
                        </div>
                        <div class="aui-info" style="padding:.2rem 0 0;">
                            <div class="aui-info-item" style="width: 39%;white-space: nowrap;overflow: hidden;">
                                <a href="javascript:;" class="traffic"><small>{{item.tagNameList[0]}}</small></a>
                            </div>
                            <div class="aui-info-item"><small>{{attentionTypeNum[$index]}}人关注</small></div>
                            <div class="aui-info-item"><small>浏览量{{countVisitNum[$index]}}</small></div>
                        </div>
                    </div>
                </li>
                <li class="loadMore">
                    <div class="aui-btn aui-btn-sm aui-btn-primary " v-if="more" @click="loadMore">查看更多</div>
                    <small v-else>已加载全部</small>
                </li>
            </ul>
        </div>
        <div class="all-list aui-content" v-else>
            <img src="../../common/images/no-result.svg" style="display: block;margin: 3rem auto;">       
        </div>
    </div>
    <a class="back-to-top" href="javascript:;">
        <img src="../../common/images/totop.svg">
    </a>
    <script type="text/javascript">
        $(document).ready(function () {
            //回到顶部
            window.onscroll = function () {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if (scrollTop >= 100) {
                    $('.back-to-top').fadeIn();
                } else {
                    $('.back-to-top').fadeOut();
                }
            }
            $('.back-to-top').click(function () { $('html,body').animate({ scrollTop: '0px' }, 500); });
        })
        new BScroll("#choose-area>#left-area", {
            click: true,
            scrollY: true
        });
        new BScroll("#choose-area>#right-area", {
            click: true,
            scrollY: true
        });
        new BScroll("#choose-subway>#left-area", {
            click: true,
            scrollY: true
        });
        new BScroll("#choose-subway>#right-area", {
            click: true,
            scrollY: true
        });
        //筛选条件切换
        // $("#all-select li").on("click", function() {
        //   if ($(this).hasClass("active")) {
        //     $(this).removeClass("active");
        //     $(".third-info").hide(100);
        //     $(".all-list").show(100);
        //   } else {
        //     $("#all-select li").removeClass("active");
        //     $(this).addClass("active");
        //     var aimDom = $(this).attr("data-type");
        //     $(".third-info").hide();
        //     $(".all-list").hide(100);
        //     $("#" + aimDom).show(300);
        //   }
        // });
        $("#all-select li").on("click", function() {
            var aimDom = $(this).attr("data-type");
            if( $("#" + aimDom).css('display') == 'none'){
                $(".third-info").hide();
                $(".all-list").hide(100);
                $("#" + aimDom).show(300);
            }else{
                $(".third-info").hide(100);
                $(".all-list").show(100);
                $("#" + aimDom).hide(300);
            }
        });
        //排序
        $(".sort-list").on("click", 'a',function() {
          if ($(this).hasClass("active")) { 
            $(this).removeClass("active");
          }else{
            $(this).addClass("active").parent().siblings().children('a').removeClass('active');            
          }
          $(".third-info").hide();
          $(".all-list").show(100);
        });
    </script>
</body>

</html>